<template>
	<!--elementUI的栅格布局-->
	<!--row代表一行，一行共分24格，
	可以创建列的时候去分配大小，所有的列总和不得大于24
	每一列中可以在嵌套行重新分配当前列的大小
	-->
	<div>
		<el-row>
			<el-col :span="24">
				<div class="div"></div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="8">
				<div class="div"></div>
			</el-col>
			<el-col :span="8">
				<div class="div"></div>
			</el-col>
			<el-col :span="8">
				<div class="div"></div>
			</el-col>
		</el-row>
		<!--配置间隙，通过gutter-->
		<el-row :gutter="10">
			<el-col class='hidden-xs-only' :span="12">
				
				<el-row :gutter="10">
					<el-col :span="12">
						<div class="div"></div>
					</el-col>
					<el-col :span="12">
						<div class="div"></div>
					</el-col>
				</el-row>
			</el-col>
			<!--偏移 offset-->
			<!--实现响应式布局 :xs="6" :sm="8" :md="10"-->
			<el-col :offset="1" :xs="6" :sm="8" :md="10">
				<div class="div"></div>
			</el-col>
			
		</el-row>
	</div>
</template>

<script>
</script>

<style>
	.div{
		width: 100%;
		height: 50px;
		margin-bottom: 10px;
		border: #999 solid 0.0625rem;
	    background: greenyellow;
	}
</style>
